import { addHospitalSet, editHospitalSet, getHospitalSetById } from '@/api/hospital/hospitalSet'
import { Button, Card, Form, Input, message, Space } from 'antd'
import React, { useEffect } from 'react'
import { useNavigate, useParams } from 'react-router-dom'

export default function AddOrUpdateHospitalSet() {
    // 获取路径中的path参数
    let { id } = useParams()
    // 1. 创建form对象
    const [form] = Form.useForm()
    // 引入编程式导航对象
    const navigate = useNavigate()
    const onFinish = async () => {
        // 3. 获取表单数据的值
        let fields = form.getFieldsValue()
        // console.log('fields',fields)
        if (id) {
            // console.log(id,fields);
            await editHospitalSet({
                id,
                ...fields
            })
            message.success('编辑成功')
        } else {
            // 发送请求添加医院设置
            await addHospitalSet(fields)
            // 添加成功信息提示
            message.success('添加医院成功')
        }
        // 跳转到医院设置列表页面
        navigate('/syt/hospital/hospitalSet')
    }

    const getHospitalSet = async () => {
        // 获取医院设置数据
        let hospitalSet = await getHospitalSetById(id as string)
        // console.log(hospitalSet)
        // 将医院数据，渲染到表单中
        form.setFieldsValue(hospitalSet)
    }
    useEffect(() => {
        id && getHospitalSet()
    }, [])
    return (
        <Card>
            <Form
                // 2. 绑定form到 Form组件
                form={form}
                labelCol={{ span: 2 }}
                wrapperCol={{ span: 22 }}
                onFinish={onFinish}
            >
                <Form.Item
                    name='hosname'
                    label='医院名称'
                    rules={[{ required: true, message: '请输入医院名称' }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    name='hoscode'
                    label='医院编号'
                    rules={[{ required: true, message: '请输入医院编号' }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    name='apiUrl'
                    label='api基础路径'
                    rules={[{ required: true, message: '请输入api基础路径' }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    name='contactsName'
                    label='联系人姓名'
                    rules={[{ required: true, message: '请输入联系人姓名' }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    name='contactsPhone'
                    label='联系人手机'
                    rules={[
                        { required: true, message: '请输入联系人手机' },
                        { pattern: /^1[3-9]\d{9}$/, message: '请输入合法的手机号' }
                    ]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    wrapperCol={{ offset: 2, span: 16 }}
                >
                    <Space>
                        <Button type='primary' htmlType='submit'>保存</Button>
                        <Button onClick={() => navigate(-1)}>返回</Button>
                    </Space>
                </Form.Item>
            </Form>
        </Card>
    )
}
